<template>
  <div class="app-container">

    <!--头部搜索-->
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item
        v-for="(item,index) in  inquiryZxj"
        :key="index"
        :label="item.label"
        :prop="item.prop"
      >
        <el-input
          :placeholder="item.placeholder"
          v-model="queryParams[item.prop]"
          clearable
          @keyup.enter.native="Query"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="Query"
        >搜索
        </el-button>
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
        >重置
        </el-button>
      </el-form-item>
    </el-form>

    <!--table表单-->
    <el-table
      border
      fit
      highlight-current-row
      v-loading="loading"
      :data="zxjList"
      @selection-change="handleSelectionChange"
      @filter-change="filterChange"
    >
      <el-table-column
        type="selection"
        width="45"
        align="center"
      ></el-table-column>
      <el-table-column
        label="序号"
        prop="zxjId"
        sortable="custom"
        align="center"
        width="75"
      />

      <el-table-column
        label="时间"
        prop="createTime"
        width="170px"
        align="center"
      ></el-table-column>
      <el-table-column
        label="学号"
        align="center"
        prop="xuehao"
        width="125"
      ></el-table-column>
      <el-table-column
        label="姓名"
        align="center"
        prop="userName"
        width="75"
      ></el-table-column>
      <el-table-column
        label="班级"
        align="center"
        prop="deptName"
      ></el-table-column>
      <el-table-column
        label="证件类型"
        align="center"
        prop="userIdcardtype"
        width="180"
      >
        <template slot-scope="scope">
          <dict-tag
            :options="dict.type.stu_user_cardtype"
            :value="scope.row.userIdcardtype"
          />
        </template>
      </el-table-column>
      <el-table-column
        label="证件号"
        align="center"
        prop="userIdno"
        width="200"
      ></el-table-column>
      <el-table-column
        label="审核状态"
        align="center"
        prop="status"
        width="125"
        :filters="[{ text: '未审批', value: '0' }, { text: '已通过', value: '2' },{ text: '未通过', value: '1'}]"
      >
        <template slot-scope="{row}">
          <el-tag
            type="info"
            v-show="row.status==='0'"
          >
            未审批
          </el-tag>
          <el-tag
            type="success"
            v-show="row.status==='2'"
          > 已通过
          </el-tag>
          <el-tag
            type="danger"
            v-show="row.status==='1'"
          > 未通过
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column
        width="125"
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            class="pan-btn green-btn"
            @click="handleQuery(scope.row)"
            v-hasPermi="['teacher:zxj:query']"
          >审批

          </el-button>

        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 审批对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="open"
      width="600px"
      append-to-body
    >

      <el-tabs v-model="activeName">
        <!--学生提交表单-->
        <el-tab-pane label="助学金申请" name="first">
          <el-form
            ref="form"
            :model="form"
            label-width="80px"
          >
            <el-form-item
              label="姓名"
              prop="userName"
            >
              <el-input
                v-model="form.userName"
                placeholder="请输入姓名"
              />
            </el-form-item>
            <el-form-item
              label="证件类型"
              prop="userIdcardtype"
            >
              <el-select
                v-model="form.userIdcardtype"
                placeholder="请选择证件类型"
              >
                <el-option
                  v-for="dict in dict.type.stu_user_cardtype"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              label="证件号"
              prop="userIdno"
            >
              <el-input
                v-model="form.userIdno"
                placeholder="请输入证件号"
              />
            </el-form-item>

            <el-form-item
              label="户口性质"
              prop="householdRegister"
            >
              <el-radio-group v-model="form.householdRegister">
                <el-radio label="农村">农村</el-radio>
                <el-radio label="城镇">城镇</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item
              label="家庭人口数"
              prop="familyPopulation"
            >
              <el-input
                v-model.number="form.familyPopulation"
                placeholder="请输入家庭人口数"
              />
            </el-form-item>

            <el-form-item
              label="家庭成员在学人数"
              prop="studyNumber"
            >
              <el-input
                v-model.number="form.studyNumber"
                placeholder="请输入家庭成员在学人数"
              />
            </el-form-item>

            <el-form-item
              label="赡养人数"
              prop="toSupportNumberOf"
            >
              <el-input
                v-model.number="form.toSupportNumberOf"
                placeholder="赡养人数"
              />
            </el-form-item>

            <el-form-item
              label="家庭失业人数"
              prop="numberUnemployedFami"
            >
              <el-input
                v-model.number="form.numberUnemployedFami"
                placeholder="家庭失业人数"
              />
            </el-form-item>

            <el-form-item
              label="健康状态"
              prop="healthStatus"
            >
              <el-radio-group v-model="form.healthStatus">
                <el-radio label="本人残疾">本人残疾</el-radio>
                <el-radio label="学生本人患重大疾病">学生本人患重大疾病</el-radio>
                <el-radio label="健康">健康</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item
              :label="item.label"
              v-for="(item,index) in zxjDialog"
              :key="index"
              v-show="form.zxjId === null||form[item.model]==='1'"
            >
              <el-radio-group v-model="form[item.model]">
                <el-radio
                  v-for="dict in dict.type.zxj_yes_no"
                  :key="dict.value"
                  :label="dict.value"
                >{{ dict.label }}
                </el-radio>
              </el-radio-group>
            </el-form-item>

            <!--查看时图片回显-->

            <el-form-item label="佐证图片" v-if="form.zxjId != null&&src1!=null">
              <el-row>

                <el-image
                  :span="12"
                  v-for="(item,index) in src1"
                  style="width:130px;height:130px;margin:15px"
                  :src="item"
                  :preview-src-list="src1"
                >
                </el-image>

              </el-row>
            </el-form-item>

            <el-form-item
              label="补充"
              prop="stuContent"
            >
              <editor
                v-model="form.stuContent"
                :min-height="192"
              />
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <!--教师审批操作-->
        <el-tab-pane label="审批" name="second">
          <el-form

            :model="shengpi"
            ref="shengpi"
            label-width="80px"
            :rules="rules"
          >

            <el-form-item label="总分" prop="score"
            >
              <el-input v-model.number="shengpi.score" style="width:40%"></el-input>
            </el-form-item>

            <el-form-item label="是否通过" prop="status"
            >
              <el-radio-group v-model="shengpi.status">
                <el-radio label="2" border>通过</el-radio>
                <el-radio label="1" border>不通过</el-radio>
              </el-radio-group>
            </el-form-item>

            <el-form-item
              label="理由"
              prop="teaContent"
            >
              <editor
                v-model="shengpi.teaContent"
                :min-height="192"
              />
            </el-form-item>

          </el-form>
        </el-tab-pane>

      </el-tabs>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="submitForm"
        >确 定
        </el-button>
        <el-button>取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

import { getToken } from '@/utils/auth'

<script>
import { getToken } from '@/utils/auth'
import { listZxj, shengpi } from '@/api/teacher/zxjReview'
import { getZxj } from '@/api/teacher/zxjReview'

export default {
  name: 'zxjReview',
  dicts: ['zxj_yes_no', 'stu_user_cardtype'],

  data() {
    return {

      src1: [],
      isShowImage: false,
      labelTitle: [
        '脱贫家庭学生',
        '脱贫不稳定家庭学生',
        '边缘易致贫家庭学生',
        '突发严重苦难户学生',
        '原广东省户籍建档立卡家庭学生',
        '特困供养人员',
        '孤儿',
        '特困职工儿女',
        '城乡最低生活保障户',
        '城镇低收入困难家庭',
        '享受国家定期抚恤补助的优抚对象',
        '学生本人残疾',
        '父亲为残疾人',
        '母亲为残疾人'
      ],
      labelModel: [
        'whetherfamilypoorstudents',
        'whetherstudentsunstablefamilypoverty',
        'whetheredgeeasyfamilypovertystudents',
        'whethermassiveneedystudents',
        'whetherguangddong',
        'whethermostneedysupportpersonnel',
        'whetherorphan',
        'whetherverypoorworkerchildren',
        'urbanruralsecuritydoor',
        'lowincomefamilies',
        'regularsubsidyobject',
        'whetherdisability',
        'hisfatherfordisabl',
        'hismotherfordisabl'
      ],
      //奖学金对话框
      zxjDialog: [],
      // 查询奖学金表单
      inquiryZxj: [
        {
          label: '助学金序号',
          prop: 'zxjId',
          placeholder: '请输入助学金序号'
        },
        {
          label: '用户序号',
          prop: 'userId',
          placeholder: '请输入用户序号'
        },
        {
          label: '姓名',
          prop: 'userName',
          placeholder: '请输入姓名'
        },
        {
          label: '证件号',
          prop: 'userIdno',
          placeholder: '请输入证件号'
        }
      ],
      zxjItem: [
        {
          label: '助学金序号',
          prop: 'zxjId'
        },
        {
          label: '用户序号',
          prop: 'userId'
        },
        {
          label: '姓名',
          prop: 'userName'
        },
        {
          label: '证件号',
          prop: 'userIdno'
        },
        {
          label: '审核状态',
          prop: 'status'
        }
      ],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 助学金表格数据
      zxjList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        zxjId: null,
        userId: null,
        userName: null,
        userIdno: null,
        status: null
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        score: [
          { required: true, message: '总分不能为空', trigger: 'blur' },
          { type: 'number', message: '总分必须为数字值' }
        ],
        status: [
          { required: true, message: '需设置是否通过', trigger: 'change' }
        ]
      },
      headers: {
        Authorization: 'Bearer ' + getToken()
      },
      limitNum: 15,
      fileList: [],
      token: {
        accessToken: ''
      },

      //审批表单选项卡默认显示
      activeName: 'first',

      //审批表单
      shengpi: {}
    }
  },
  created() {
    this.getList()
    this.getLabel()
  },
  methods: {
    getLabel() {
      for (const i in this.labelTitle) {
        this.zxjDialog.push({
          label: this.labelTitle[i],
          model: this.labelModel[i]
        })
      }
    },
    /** 查询助学金列表 */
    getList() {
      this.loading = true
      listZxj(this.queryParams).then((response) => {
        this.zxjList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        zxjId: null,
        userId: null,
        userName: null,
        userIdcardtype: null,
        userIdno: null,
        whetherfamilypoorstudents: '0',
        whetherstudentsunstablefamilypoverty: '0',
        whetheredgeeasyfamilypovertystudents: '0',
        whethermassiveneedystudents: '0',
        whetherguangddong: '0',
        whethermostneedysupportpersonnel: '0',
        whetherorphan: '0',
        whetherverypoorworkerchildren: '0',
        urbanruralsecuritydoor: '0',
        lowincomefamilies: '0',
        regularsubsidyobject: '0',
        whetherdisability: '0',
        hisfatherfordisabl: '0',
        hismotherfordisabl: '0',
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        status: null,
        delFlag: null,
        stuContent: null
      }
      this.src1 = []
      this.shengpi = {
        score: '0',
        status: '',
        teaContent: null
      }
    },
    /** 搜索按钮操作 */
    Query() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams.status = null
      this.resetForm('queryForm')
      this.Query()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.zxjId)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },

    /* table表格数据过滤 */
    filterChange(val) {
      //参考https://blog.csdn.net/m0_59462557/article/details/123711142

      //filterChange filters取值
      const vv = val[Object.keys(val)[0]]
      const v = vv[0]
      this.queryParams.status = v
      this.getList()
    },

    /** 审批按钮操作 */
    handleQuery(row) {
      this.isShowImage = true
      this.reset()
      const zxjId = row.zxjId || this.ids
      this.shengpi.zxjId = zxjId
      getZxj(zxjId).then((response) => {
        this.src1 = response.srcList
        this.form = response.data
        if (row.status != 0) {
          this.shengpi = response.shengpi
        }
        this.shengpi.status = row.status
        this.open = true
        this.title = '查看助学金申请'
      })
    },
    /* 教师审批提交 */
    submitForm() {
      this.$refs.shengpi.validate((valid) => {
        if (valid) {
          shengpi(this.shengpi).then((response) => {
            if (response.code === 200) {
              this.$modal.msgSuccess(response.msg)
              this.open = false
              this.getList()
            }
          })
        }
      })
    }
  }

}
</script>

<style scoped>
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}

.component-item {
  min-height: 100px;
}
</style>
